<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
  >
    <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-form-item label="脚本名称" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="类型" prop="typeId">
          <el-cascader
            :props="propsRule"
            v-model="ruleForm.typeId"
            :options="options"
            clearable></el-cascader>
        </el-form-item>
        <el-form-item label="脚本" prop="groovyScript">
          <span slot="label">
            脚本
            <el-tooltip class="item" effect="dark" content="groovy脚本，例如 def main(){}" placement="top-start">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="ruleForm.groovyScript" type="textarea" placeholder="请输入脚本内容, 例如: def main(){} " />
        </el-form-item>
        <el-form-item label="入参类型" prop="type">
          <el-radio-group v-model="ruleForm.type" :disabled="ruleForm.id!==''">
            <el-radio :label="0">文件入参</el-radio>
            <el-radio :label="1">普通入参</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="入口函数" prop="invokeFunction">
          <el-input v-model="ruleForm.invokeFunction" placeholder="入口函数名，需要执行的那个函数名称" />
        </el-form-item>
        <el-form-item label="参数配置" prop="parameter">
          <span slot="label">
            参数配置
            <el-tooltip class="item" effect="dark" content="函数的入参，格式为JSON，其中key为参数名称，value为参数默认值，例如: { k:v,k2:v2 } " placement="top-start">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-tooltip class="item" effect="dark" content="入参类型为文件入参时不可填写，为普通入参可填写，若无入参则不填" placement="top-start">
            <el-input type="textarea" v-model="ruleForm.parameter" :disabled="ruleForm.type==0" placeholder="入参类型为文件入参时不可填写，为普通入参可填写，若无入参则不填" />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="ruleForm.remark" type="textarea"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { groovyAddOrUpdate } from '@/api/groovy'
export default {
  name: 'AddOrUpdateScript',
  data() {
    return {
      propsRule: {
        value: 'id',
        label: 'label',
        children: 'children',
        emitPath: false
      },
      typeValue: '',
      options: [],
      dialogVisible: false,
      title: '',
      errorMsg: '',
      ruleForm: {
        id: '',
        name: '',
        groovyScript: '',
        parameter: '',
        type: 1,
        invokeFunction: '',
        remark: '',
        typeId: ''
      },
      rules: {
        name: [
          { required: true, message: '脚本名称不能为空', trigger: 'change' }
        ],
        groovyScript: [
          { required: true, message: '脚本内容不能为空', trigger: 'change' }
        ],
        invokeFunction: [
          { required: true, message: '入口函数不能为空', trigger: 'change' }
        ],
        parameter: [
          { validator: this.validateCharacter, trigger: 'blur' }
        ],
        typeId: [
          { required: true, message: '请选择对应种类', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    validateCharacter(rule, value, callback) {
      try {
        if (value) {
          JSON.parse(value)
          callback()
        } else {
          callback()
        }
      } catch (e) {
        callback(new Error('参数配置格式有误')) }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          groovyAddOrUpdate(this.ruleForm).then(() => {
            this.handleClose()
          })
        }
      })
    },
    init(row) {
      if (row) {
        this.title = '脚本修改'
        this.ruleForm.id = row.id
        this.ruleForm.name = row.name
        this.ruleForm.groovyScript = row.groovyScript
        this.ruleForm.parameter = row.parameter
        this.ruleForm.type = row.type
        this.ruleForm.invokeFunction = row.invokeFunction
        this.errorMsg = row.errorMsg
        this.ruleForm.remark = row.remark
        this.ruleForm.typeId = row.typeId
      } else {
        this.title = '脚本新增'
      }
    },
    handleClose() {
      this.$parent.init()
      this.$parent.AddOrUpdateScriptVisible = false
    }
  }
}
</script>

<style scoped>

</style>
